<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            box-shadow: 0px 0px 12px #999;
            width: 600px;
            height: 400px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="box" id="a-chart"></div>
    <hr>
    <div class="box" id="b-chart"></div>
    <hr>
    <div class="box" id="c-chart"></div>
    <!-- <script src="./echarts/echarts.js"></script> -->
    <!-- <script src="./echarts/aaa.js"></script> -->
    <script type="module">
        import * as echarts from './echarts/echarts.esm.js'
        // let echartA = echarts.init(document.querySelector("#a-chart"),"walden")
        let echartA = echarts.init(document.querySelector("#a-chart"))
        let option = {
            title: {
                text: 'ECharts 入门示例',
                link: 'https://www.itany.com',
                left: "center"
            },
            legend: {
                data: ['销量', "库存", "新增"],
                // data:[
                //     { name:"销量" },
                //     { name:"库存" },
                //     { name:"新增" }
                // ],
                selected: {
                    '销量': true,
                    "库存": true,
                    "新增": false
                },
                top: 30
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            // 图形显示的类别库
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                },
                {
                    name: '库存',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                },
                {
                    name: '新增',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20],
                    itemStyle: {
                        color: "red"
                    }
                }
            ]
        };
        echartA.setOption(option)


        let echartB = echarts.init(document.querySelector("#b-chart"))
        echartB.setOption({
            title: {
                text: 'ECharts 入门示例',
                link: 'https://www.itany.com',
                left: "center"
            },
            legend: {
                data: ['销量'],
                top: 30
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            // 图形显示的类别库
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                },
                {
                    name: '销售占比',
                    type: 'pie',
                    data: [
                        { name: "衬衫", value: 5 },
                        { name: "羊毛衫", value: 20 },
                        { name: "雪纺衫", value: 36 },
                        { name: "裤子", value: 10 },
                        { name: "高跟鞋", value: 10 },
                        { name: "袜子", value: 20 },
                    ],
                    center: [450, 120],
                    radius: [20, 40]
                }
            ]
        })

        let echartC = echarts.init(document.querySelector("#c-chart"))
        echartC.setOption({
            title: {
                text: 'ECharts 入门示例',
                link: 'https://www.itany.com',
                left: 20,
                top: 20
            },
            legend: {
                data: ['销量',"新增"],
                top: 50,
                left: 20
            },
            grid: [
                {
                    show: true,
                    // backgroundColor: "#dedede",
                    width: 500,
                    height: 180,
                    top: 160
                },
                {
                    show: true,
                    // backgroundColor: "#999999",
                    width: 300,
                    height: 130,
                    top: 10,
                    right: 40
                },
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: [
                { gridIndex: 0, data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
                { gridIndex: 1, data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }
            ],
            yAxis: [
                { gridIndex: 0 },
                { gridIndex: 1 }
            ],
            // 图形显示的类别库
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    xAxisIndex:0,
                    yAxisIndex:0,
                    data: [5, 20, 36, 10, 10, 20],
                },
                {
                    name: '新增',
                    type: 'line',
                    xAxisIndex:1,
                    yAxisIndex:1,
                    data: [5, 20, 36, 10, 10, 20],
                },
            ]
        })
    </script>
</body>

</html>